<template>
  <div>
    <h1>store中的count:{{ count }}</h1>
    <h1>store中的num:{{ num }}</h1>
    <!-- 方式一： -->
    <button @click="$store.commit('increase')">+1</button>
    <button @click="$store.commit('increaseN', { n: 20 })">+n</button>
    <!-- 方法二： -->
    <button @click="increase">+1</button>
    <button @click="increaseN">+n</button>
    <!-- 方法三： -->
    <button @click="increase">+1</button>
    <button @click="increaseN({ n: 3 })">+n</button>
  </div>
</template>

<script>
  import { mapMutations, mapState } from "vuex";
  export default {
    name: "Item",
    computed: {
      ...mapState(["count", "num"]),
    },
    methods: {
      increase() {
        return this.$store.commit("increase");
      },
      increaseN() {
        // 两个参数第一个是方法名 第二个是传递的参数
        this.$store.commit("increaseN", { n: 4 });
      },
      ...mapMutations(["increase", "increaseN"]),
    },
  };
</script>

<style></style>
